<template>
    <div class="wrapper">
        <div class="content">
            <span class="textBox1">¥<b>{{arr.money}}</b></span>
            <i>尚余{{ arr.coupon_num }}杯</i>
            <span class="textBox2">vip全国通用</span>
            <span class="validity">期限{{ firstTime }}-{{ lastTime }}</span>
            <van-stepper class="textBox3" v-model="value" theme="round" button-size="22" disable-input />
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['arr', 'lastTime', 'firstTime'])
</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
    width: 345px;
    height: 76px;
    left: 15px;
}

.content {
    position: absolute;
    width: 345px;
    height: 60px;
    top: 8px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: rgba(242, 242, 242, 1) solid 1px;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    border: 1px solid rgba(242, 242, 242, 1);
}

.textBox1 {
    position: absolute;
    width: 39px;
    height: 36px;
    left: 35px;
    top: 18px;
}

i {
    position: absolute;
    width: 45px;
    height: 17px;
    left: 33px;
    top: 38px;
    color: rgba(166, 166, 166, 1);
    font-size: 12px;
    line-height: 150%;
    text-align: left;
    transform: scale(0.8);
}

.validity {
    position: absolute;
    height: 17px;
    left: 112px;
    top: 40px;
    color: rgba(166, 166, 166, 1);
    font-size: 11px;
    line-height: 150%;
    text-align: left;
}

b {
    font-size: 24px;
    color: rgba(56, 56, 56, 1)
}

.textBox2 {
    position: absolute;
    width: 80px;
    height: 21px;
    left: 112px;
    top: 20px;
    color: rgba(56, 56, 56, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: left;
}

.textBox3 {
    position: absolute;
    width: 90px;
    height: 22px;
    left: 250px;
    top: 19px;
}
</style>